import React,{Component} from 'react';
import * as dayjs from 'dayjs'
import { Button,Modal } from 'antd';
import {connect} from 'react-redux'
import './index.css';
import {loginOutUserAndToken} from '../../../redux/actions/login'
import {ExclamationCircleOutlined,FullscreenOutlined,FullscreenExitOutlined} from '@ant-design/icons';
import {withRouter} from 'react-router-dom'
import screenfull from 'screenfull';
@connect(
    state => ({
        userInfo: state.login,
        title: state.menu
    }),
    {
        loginOutUserAndToken
    }
)
@withRouter

 class Header extends Component {
	 state = {
		 isFull: false,
		 currentDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    }
	 fullScreen=()=>{
		 screenfull.toggle();
	 }
	 componentDidMount(){
		 //切换全屏按钮的回调
	 	screenfull.on('change',()=>{
			let isFull = !this.state.isFull
			this.setState({isFull})
		})
		 this.getSystemTime();
		
	 }
	 getSystemTime=()=>{
		 this.timer = setInterval(() => {
		     this.setState({
		         currentDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
		     })
		 }, 1000);
	 }
	 componentWillUnmount() {
	     //清除定时器
	     clearInterval(this.timer);
	 }
	 loginOut=()=>{
		 Modal.confirm({
		     title: '确定退出吗？',
		     icon: <ExclamationCircleOutlined/>,
		     okText: '确认',
		     cancelText: '取消',
		     onOk: () => {
		         this.props.loginOutUserAndToken();
		     }
		 });
	 }
	render(){
		const {isFull, currentDate} = this.state;
		return (
		 <div  className="header">
		     <div className="headerTop" onClick={this.currentTime}>
			    
		         <div><Button size="small" onClick={this.fullScreen}>
				  {
				         isFull?(
				             <FullscreenOutlined/>
				         ):<FullscreenExitOutlined/>
				  }
				 </Button>&nbsp;&nbsp;&nbsp;欢迎,{this.props.userInfo.user.username} 
				 <Button type="link" style={{color:'#1ca579'}} onClick={this.loginOut}>退出</Button>
				 </div>
		     </div>
			 <div className="headerBottom">
			     <div className="headerBottomLeft">商品分类管理</div>
			     <div className="headerBottomRight">
				 <span >{currentDate}</span>
			
				 多云转晴
				 </div>
			 </div>
		 </div>
		)
	}
}
export default  connect(
  state =>({
	  userInfo:state.login
 }),
 {
     loginOutUserAndToken
 }
)(Header)
	  // <img src="https://dss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/aladdin/img/new_weath/bigicon/1.png"  alt="">